<!--
 * @Description: 附件管理
 * @Author: 
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-18 10:37:23
-->
<template>
  <div class="pages_content attachment">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div v-loading='treeLoading' class="main_left scroll" style="width: 200px;padding: 20px;">
          <div>
            <el-tree default-expand-all :data="treearr" class="tree-line" :indent="0" :props="defaultProps" :expand-on-click-node="false" @node-click="setTree">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <div v-if="data.imgIcon" style="display: inline-block;width:17px;height:26px;padding:8px 3px 0 0">
                  <img style="width:14px;height:14px" :src="data.imgIcon" />
                </div>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>

        </div>
        <div class="main_right">
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">操作人</span>
                  <el-input v-model="tableParam.userName" placeholder="请输入操作人" style="width: 130px;" clearable />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">操作起止时间</span>
                  <el-date-picker v-model="datePicker" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">操作路径</span>
                  <el-input v-model="tableParam.apiUrl" placeholder="请输入操作路径" style="width: 150px;" clearable />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">IP地址</span>
                  <el-input v-model="tableParam.ip" placeholder="请输入IP地址" style="width: 150px;" clearable />
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), queryPage()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_info">
              <el-table ref="multipleTable" v-loading="loading" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
                <el-table-column label="操作人" prop="userName" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip label="操作人路径" prop="userPath" align="center"></el-table-column>
                <el-table-column label="IP地址" prop="ip" align="center"></el-table-column>
                <el-table-column label="操作时间" prop="requestTime" align="center"></el-table-column>
                <el-table-column label="操作路径" prop="apiUrl" align="center">
                  <template slot-scope="scope" >
                    <div style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor: pointer;" @click="showDetails(scope.row.apiUrl)">{{scope.row.apiUrl}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="参数" prop="params" align="center">
                  <template slot-scope="scope" >
                    <div style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor: pointer;" @click="showDetails(scope.row.params)">{{scope.row.params}}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :current-page.sync="tableParam.page" :total="total" @current-change="queryPage()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="queryPage()">刷新</el-button>
            </div>
          </div>
        </div>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="80%">
          <span>{{message}}</span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import breaDcrumb from "@/components/breadcrumb";
import { mapGetters } from "vuex";
import { query_page } from "@/api/basedata/log.js";
import { formatTreeData } from "@/utils/utils";
import { queryPage as queryorganizationPage } from "@/api/basedata/organization.js";
export default {
  components: {
    breaDcrumb,
  },
  data() {
    return {
      loading: false,
      /*弹要修改过着添加的数据*/
      /*判断收起展开*/
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [],
      showCardNav: true,
      dialogVisible: false,
      table: [
        { label: "操作人", width: "auto", prop: "userName", status: true },
        { label: "操作人路径", width: "auto", prop: "userPath", status: true },
        { label: "IP地址", width: "auto", prop: "ip", status: true },
        { label: "操作时间", width: "auto", prop: "requestTime", status: true },
        { label: "操作路径", width: "auto", prop: "apiUrl", status: true },
        { label: "参数", width: "auto", prop: "params", status: true },
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        userName: "",
        startHandlerTime: "",
        endHandlerTime: "",
        ip: "",
        apiUrl: "",
        types: "type_normal",
        foreignId: '',
        foreignType: 'type_organization',
      },
      total: 0,
      treearr: [],
      datePicker: [],
      ButtonList: [],
      message: '',
      treeLoading: false
    };
  },
  watch: {
    datePicker() {
      if (this.datePicker) {
        this.tableParam.startHandlerTime = this.datePicker[0]
        this.tableParam.endHandlerTime = this.datePicker[1]
      } else {
        this.tableParam.startHandlerTime = ''
        this.tableParam.endHandlerTime = ''
      }
    },
  },
  beforeCreate() {
    const params = {
      page: 1,
      pageSize: 10000,
      showEnable: 0,
    };
    queryorganizationPage(params).then((res) => {
      if (res.code === 1001) {
        const { data } = res.data;
        this.treearr = formatTreeData(
          data,
          "id",
          "parentId",
          "children",
          "parent_id"
        );
        this.treeLoading = false
      }
    });
  },
  mounted() {
    this.treeLoading = true;
    this.ButtonList = this.$ButtonList()
    this.queryPage();
  },
  methods: {
    showDetails (data) {
      this.dialogVisible = true;
      this.message = data;
    },
    /*重置*/
    reset() {
      this.tableParam = this.$options.data().tableParam
      this.queryPage();
    },
    /*接受树状数据*/
    setTree(e) {
      this.tableParam.foreignId = e.id;
      this.tableParam.page = 1;
      this.queryPage();
    },

    /*获取列表*/
    queryPage() {
      this.loading = true
      query_page(this.tableParam).then((res) => {
        this.loading = false
        this.total = res.data.totalCount;
        this.tableData = res.data.list;
      });
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 324;
      } else {
        num = this.screenWidth - 421;
      }
      return "width:" + num + "px;";
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tree {
  display: inline-block;
}
.attachment {
  .el-link {
    i {
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  .dialoginfo {
    width: 640px;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      > span {
        display: flex;
        align-items: center;
      }
      .el-input,
      .el-select {
        width: 230px;
      }
    }
    .textarea_input {
      padding-top: 10px;
      align-items: flex-start;
      height: 70px;
    }
    .textarea {
      width: 580px;
    }
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
    display: flex;
    overflow: hidden;
  }
  .main_left {
    border-right: 1px solid #e1e5ed;
    height: 100%;
    overflow: auto;
  }
  .main_right {
    height: 100%;
    overflow: auto;
  }
  .main_right::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .main_right::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .main_right::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .main_right::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .main_right::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 20px;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
}
</style>
